<template>
  <view class="index">
    <view class="danmaku">
      <sv-danmaku ref="danmakuRef" :list="danmakuData" @send="send" :loop="loop"></sv-danmaku>
<!--      <view class="loop-switch">
        循环
        <switch checked @change="changeLoop" />
      </view>-->
    </view>
<!--    <view class="footer">
      <button type="warn" size="mini" @click="over">停止</button>
      <button type="default" size="mini" @click="stop">暂停</button>
      <button type="primary" size="mini" @click="start">开始</button>
    </view>-->
  </view>
</template>

<script>
import {getAnhaoList,sendAnhao} from '@/api/user.js';
export default {
  data() {
    return {
      danmakuData: [],
      danmakuRenderFlag: false,
      loop: true
    }
  },
  onLoad() {
    /**
     * 在获取弹幕列表时，请确保先拿到完整的弹幕列表
     * 确保danmakuData中的弹幕列表数据从后端取到后，再调用createTimer开始装载弹幕
     * 获取danmakuRef元素时需要在nextTick中，否则可能导致拿不到dom元素而报没有相应方法的错
     */
    this.getDanmakuList()
  },
  onShow() {
    if (this.danmakuRenderFlag) {
      this.$nextTick(() => {
        this.start()
      })
    }
  },
  onHide() {
    this.stop()
  },
  onUnload() {
    this.over()
  },
  watch: {
    danmakuRenderFlag(newVal) {
      if (newVal) {
        this.$nextTick(() => {
          this.start()
        })
      }
    }
  },
  mounted() {},
  methods: {
    start() {
      this.$refs.danmakuRef.createTimer()
      uni.$on('e-danmaku-click', (e) => {
        let text = e.text;
        uni.setClipboardData({
          data: ""+text+"",
          success: function () {
            uni.showToast({
              title: '复制成功',
              duration: 2000,
              icon:"none"
            });
          }
        });
      })
    },
    stop() {
      this.$refs.danmakuRef.stopTimer()
    },
    over() {
      this.$refs.danmakuRef.clearTimer()
      uni.$off('e-danmaku-click')
    },
    send(e) {
      this.addDanmaku(e)
    },
    changeLoop(e) {
      this.loop = e.detail.value
      if (this.loop) {
        // 重新开启循环后，需要重新点击开始
        uni.showToast({
          title: '请点击开始',
          icon: 'none'
        })
      }
    },
    getDanmakuList() {
      this.danmakuData = []
      /*for (var i = 0; i < 20; i++) {
        this.danmakuData.push({
          _id: '666',
          id: 'dmid_666',
          text: '弹幕数据量极少测试',
          speed: 5,
          style: {
            color: '#FE0302',
            fontSize: '16px'
          },
          img: 'http://w.wifi.com/uploads/attach/2024/11/20241124/0613f706f3af8138bae6db16228c4695.png', // 头像图片地址，可选
          create_date: 1711436947847,
          creator: 'admin'
        })
      }*/
      // console.log('==== getDanmakuList res :', this.danmakuData)
      //this.danmakuRenderFlag = true
      getAnhaoList({}).then( res=>{
        this.danmakuData = res.data;
        this.danmakuRenderFlag = true
      }).catch( err =>{
        this.$util.Tips({title:'暗号获取失败'});
      })
    },
    addDanmaku(data) {
      sendAnhao({text:data.text}).then( res=>{
        this.$util.Tips({title:'发送成功'});
      }).catch( err =>{
        this.$util.Tips({title: err || '发送失败'});
      })
    }
  }
}
</script>

<style lang="scss">
.index {
  width: 100%;
  background-image: url('../../../static/images/liaotianbeijing3.png');
  background-size: cover;
  background-repeat: no-repeat;
  height: calc(100vh - var(--window-top));
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;

  .danmaku {
    flex: 1;
    /*background-color: #f4f4f4;*/
    box-sizing: border-box;
    position: relative;
    overflow: hidden;

    .loop-switch {
      position: absolute;
      top: 10px;
      right: 10px;
    }
  }

  .footer {
    margin-top: 10px;
    display: flex;
    justify-content: space-evenly;

    uni-button {
    }
  }
}
</style>
